<template>
  <div v-loading="loading">
    <el-card
      v-if="info"
      shadow="always"
      class="box-card flex"
      style="margin: 20px; width: 740px;"
    >
      <div
        class="flex"
        style="
          border-bottom: 1px dashed rgba(166, 166, 166, 1);
          padding-bottom: 15px;
          margin-top: 15px;
        "
      >
        <el-image
          style="
            width: 100%;
            height: auto;
            margin-right: 25px;
          "
          :src="info.schoolPic"
          fit="contain"
          :preview-src-list="[info.schoolPic]"
        ></el-image>
        <div class="title_content">

        </div>
      </div>
      <div class="info" style="
          border-bottom: 1px dashed rgba(166, 166, 166, 1);
          padding-bottom: 15px;
          margin-top: 15px;
        "
      >
        <div style="margin-top: 15px;font-size: 20px;font-weight: 600;color: rgba(48, 49, 51, 1);">{{ info.schoolName }}</div>
      </div>
      <div class="info" style="
          border-bottom: 1px dashed rgba(166, 166, 166, 1);
          padding-bottom: 15px;
          margin-top: 15px;
        "
      >
        <div class="t1">基本信息</div>
        <div class="t2">
          地址：{{ info.schoolArea }}{{ info.schoolAddress }}
        </div>
        <div class="t2">联系人：{{ info.principal }}</div>
        <div class="t2">电话：{{ info.tel }}</div>
      </div>
      <div class="info">
        <div class="t1">学校简介</div>
        <div
          style="white-space: pre-wrap;word-wrap:break-word;width: 100%;margin-top: 10px;font-size: 14px;font-weight: 400;color: rgba(48, 49, 51, 1);"
        >{{ info.content }}
        </div>
      </div>
    </el-card>
    <el-empty
      style="margin-top: 80px"
      v-if="!info"
      description="暂无信息~"
    ></el-empty>
  </div>
</template>

<script>
import ChinaCitys from '@/utils/ChinaCitys.json'
import {
  getPost_school,
  updatePost_school
} from '@/api/schoolOrganization/schoolInfo'

export default {
  name: 'schoolDetial',
  props: {
    schoolId: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      info: null,
      loading: false,
      vuecutshow: false,
      // 是否显示弹出层
      open: false,
      TagProps: {
        value: 'label',
        label: 'label',
        children: 'children'
      },
      //   学校地区 列表
      options: ChinaCitys,
      // 表单参数
      form: {
        schoolId: undefined,
        schoolName: undefined,
        schoolArea: undefined,
        schoolAddress: undefined,
        schoolPic: undefined,
        tel: undefined,
        content: undefined,
        principal: undefined,
        examApplyLimit: undefined
      },
      // 表单校验
      rules: {
        schoolName: [
          { required: true, message: `${this.$schoolName ? this.$schoolName : '学校'}名称不能为空`, trigger: 'blur' }
        ],
        schoolArea: [
          { required: true, message: '地区不能为空', trigger: 'blur' }
        ],
        schoolAddress: [
          { required: true, message: '详细地址不能为空', trigger: 'blur' }
        ],
        schoolPic: [
          { required: true, message: `${this.$schoolName ? this.$schoolName : '学校'}图片不能为空`, trigger: 'blur' }
        ],
        tel: [{ required: true, message: '电话不能为空', trigger: 'blur' }],
        principal: [
          { required: true, message: '联系人不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {},
  methods: {
    /** 组件返回图片 */
    coverResult(e) {
      this.form.schoolPic = e
    },
    editCropper() {
      this.vuecutshow = true
    },
    /** 修改学校信息按钮 */
    updateHandle(schoolId) {
      this.open = true
      let form = JSON.parse(JSON.stringify(this.info))
      let reg = /.+?(省|市|自治区|自治州|县|区)/g
      form.schoolArea = form.schoolArea.match(reg)
      this.form = form
      if (schoolId) {
        this.form.schoolId = schoolId
      }
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let form = JSON.parse(JSON.stringify(this.form))
          form.schoolArea = form.schoolArea.join('')
          updatePost_school(form).then(() => {
            this.$modal.msgSuccess('修改成功')
            this.open = false
            this.getInfo()
          })
        }
      })
    },
    /** 获取学校信息 */
    getInfo() {
      this.loading = true
      getPost_school().then((res) => {
        this.loading = false
        this.info = res.data
      })
    }
  },
  created() {
  },
  mounted() {
    this.getInfo()
  }
}
</script>
<style scoped lang="scss">
.title_content {
  width: 420px;

  .title {
    margin-top: 15px;
    font-size: 20px;
    font-weight: 600;
    color: rgba(48, 49, 51, 1);
    text-align: center;
  }

  .content {
    width: 420px;
    margin-top: 10px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(48, 49, 51, 1);
  }
}

.info {
  .t1 {
    margin: 5px 0 10px 0;
    font-size: 20px;
    font-weight: 400;
    color: rgba(48, 49, 51, 1);
  }

  .t2 {
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(96, 98, 102, 1);
  }
}

.upload-head-edit {
  width: 322px;
  height: 82px;
  border: 1px dashed #b8c4d1;
  border-radius: 4px;
  cursor: pointer;
}

.show_img_edit {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

.uploadTip_edit {
  font-size: 12px;
  font-weight: 400;
  color: #a6a6a6;
}
</style>
